<template>
<!-- 知识小册上传图片 -->
  <div class="OSS_StyleBox">
    <a href="#" style="color: #000" @click="showDrawer('large')"
      ><setting-outlined
    /></a>
    <a-drawer
       width="500px"
      title="上传图片 "
      :size="size"
      :visible="visible"
      @close="onClose"
    >
      <div class="NameIpt">
           <p>名称:<input type="text" /></p>
           <p>描述:<textarea name="" id="" cols="30" rows="10"></textarea></p>
           <p>评论:<van-switch v-model="checked" /></p>
           <p><OSSFromStyleBox></OSSFromStyleBox></p>
      </div>
      <template height="placement" #extra>
        <a-button style="margin-right: 8px" @click="onClose">Cancel</a-button>
        <a-button type="primary" @click="onClose"><OSSImgX></OSSImgX></a-button>
      </template>
      <p></p>
    </a-drawer>
  </div>
</template>
<script>
import OSSImgX from '../../views/OSSImgX/index.vue'
import OSSFromStyleBox from '../OSSFromStyleBox/index.vue';
import OSS from '../OSS/index.vue';
import { SettingOutlined } from "@ant-design/icons-vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    const visible = ref(false);
    const size = ref("default");

    const showDrawer = (val) => {
      size.value = val;
      visible.value = true;
    };

    const onClose = () => {
      visible.value = false;
    };
    return {
      visible,
      size,
      showDrawer,
      onClose,
    };
  },
  components: {
    SettingOutlined,
    OSSImgX,
    OSSFromStyleBox
  },
});
</script>

<style>
/* .OSS_StyleBox{
    width: 500px;
  } */
</style>